<template>
  <div>
    <Button @click="visibleClick">click me</Button>
    <m-modalForm
      :formOptions="formOptions"
      v-model:visible="visible"
      title="提交表单"
    >
      <template #footer="{ form }">
        <Button
          @click="confirm(form)"
          type="primary"
          >确定</Button
        >
        <Button
          @click="cancel(form)"
          style="margin-left: 8px"
          >取消</Button
        >
      </template>
    </m-modalForm>
  </div>
</template>

<script setup lang="ts">
import { FormOptions } from '../../components/form/src/types'
import { ref } from 'vue'
import { Message } from 'view-ui-plus'

const formOptions: FormOptions[] = [
  {
    type: 'input',
    value: '',
    label: '用户名',
    prop: 'username',
    placeholder: '请输入用户名',
    rules: [
      {
        required: true,
        message: '请输入用户名',
        trigger: 'blur'
      },
      {
        min: 5,
        max: 10,
        message: '长度在5-10之间',
        trigger: 'blur'
      }
    ],
    attrs: {
      clearable: true
    }
  },
  {
    type: 'radioGroup',
    prop: 'gender',
    value: '',
    label: '性别',
    placeholder: '请选择性别',
    rules: [
      {
        required: true,
        message: '请选择性别',
        trigger: 'change'
      }
    ],
    children: [
      {
        type: 'radio',
        label: '男'
      },
      {
        type: 'radio',
        label: '女'
      }
    ]
  },
  {
    type: 'select',
    prop: 'city',
    value: '',
    label: '城市',
    placeholder: '请选择城市',
    rules: [
      {
        required: true,
        message: '请选择城市',
        trigger: 'change'
      }
    ],
    children: [
      {
        type: 'option',
        label: '北京',
        value: '北京'
      },
      {
        type: 'option',
        label: '上海',
        value: '上海'
      },
      {
        type: 'option',
        label: '广州',
        value: '广州'
      },
      {
        type: 'option',
        label: '深圳',
        value: '深圳'
      }
    ],
    attrs: {
      clearable: true
    }
  },
  {
    type: 'checkboxGroup',
    prop: 'hobby',
    value: [],
    label: '爱好',
    placeholder: '请选择爱好',
    rules: [
      {
        required: true,
        message: '请选择爱好',
        trigger: 'change',
        type: 'array'
      }
    ],
    children: [
      {
        type: 'checkbox',
        label: '篮球'
      },
      {
        type: 'checkbox',
        label: '足球'
      },
      {
        type: 'checkbox',
        label: '排球'
      },
      {
        type: 'checkbox',
        label: '乒乓球'
      }
    ]
  },
  {
    type: 'datePicker',
    value: [],
    label: '日期',
    prop: 'daterange',
    placeholder: '请选择日期',
    rules: [
      {
        required: true,
        message: '请选择日期',
        trigger: 'change',
        type: 'array'
      }
    ]
  }
]

const visible = ref(false)

const visibleClick = () => {
  visible.value = true
}

const confirm = (form: any) => {
  let validate = form.validateForm()
  validate((valid: boolean) => {
    if (valid) {
      Message.success('success')
      visible.value = false
    } else {
      Message.error('error')
    }
  })
}

const cancel = (form: any) => {
  form.resetForm()
  visible.value = false
}
</script>

<style>
.ivu-modal-body {
  padding: 25px;
}
</style>
